<template>
  <div>
    <mt-swipe :auto="4000">
    <!-- 将来谁使用组件 谁去传递数据 lunbolist -->
    <!-- 此时 lunbolist 应该是父组件向子组件传值来设置 -->
      <mt-swipe-item v-for="val in lunbolist" :key="val.img">
        <img :src="val.img" alt="轮播图" :class="{full:isfull}">
      </mt-swipe-item>
    </mt-swipe>
  </div>

  <!-- 为什么商品评论中的轮播图 这么丑 -->
  <!-- 1.首页中的图片，他的宽和高 都使用了100%的高度！ -->
  <!-- 2.在商品详情页面中，轮播图的图片，也使用宽高是100%，页面就丑了-->
  <!-- 3.商品详情页面中的轮播图，期望高度为100%，宽度自适应 -->
  <!-- 4.经过分析，得到问题原因，首页轮播图和详情中的分歧点是宽度 100% 还是自适应 -->
</template>
<script>
export default {
    props:["lunbolist","isfull"]
};
</script>
<style lang="scss" scoped>
/* 用mint-ui里面的轮播图 必须要给一个高度 */
.full{
  width: 100%;
}
.mint-swipe {
  height: 200px;
}
.mint-swipe-item {
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 200px;
  img {   
    height: 100%;
  }
}
// .mint-swipe-item {
//   &:nth-child(1) {
//     background-color: red;
//   }
//   &:nth-child(2) {
//     background-color: blue;
//   }
//   &:nth-child(3) {
//     background-color: green;
//   }
// }
</style>